<template>
  <el-card>
    <div slot="header" class="clearfix custom-header">
      <span class="f16 fb"><i class="el-icon-notebook-2 fb f18 text-blue mr5" />招聘环节明细表</span>
      <div class="fr f14">
        职位名称：
        <el-input
          v-model="listQuery.jobName"
          class="mr20"
          size="small"
          style="width: 120px;"
          placeholder="请输入关键字"
          @input="handleFilter"
        />
        开始招聘时间：
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          class="mr10 filter-item"
          start-placeholder="开始日期"
          size="small"
          style="width: 250px;"
          end-placeholder="结束日期"
          @change="change"
        />
        <el-button v-waves class="filter-item" size="small" type="primary" icon="el-icon-search" @click="handleFilter">
          搜索
        </el-button>
        <el-button type="primary" size="small" icon="el-icon-download" class="ml30" @click="exportExcel">
          导出
        </el-button>
      </div>
    </div>
    <el-table
      ref="table"
      :data="list"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="jobName"
        label="职位名称"
        width="180"
      />
      <el-table-column
        prop="comName"
        label="所属公司"
        width="180"
      />
      <el-table-column
        label="开始招聘时间"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.jobTime | parseTime }}
        </template>
      </el-table-column>
      <el-table-column
        prop="firstScrCount"
        label="初筛通过"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.firstScrCount || 0 }}
        </template>
      </el-table-column>
      <el-table-column
        label="初筛通过率"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.firstScrRate*100 }}%
        </template>
      </el-table-column>
      <el-table-column
        prop="viewCount"
        label="邀约面试"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.viewCount || 0 }}
        </template>
      </el-table-column>
      <el-table-column
        label="邀约面试率"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.viewRate*100 }}%
        </template>
      </el-table-column>
      <el-table-column
        prop="alreadyViewCount"
        label="已面试"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.alreadyViewCount || 0 }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="面试到场率"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.presentRate*100 }}%
        </template>
      </el-table-column> -->
      <el-table-column
        prop="adoptCount"
        label="面试通过"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.adoptCount || 0 }}
        </template>
      </el-table-column>
      <el-table-column
        label="面试通过率"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.adoptRate*100 }}%
        </template>
      </el-table-column>
      <el-table-column
        prop="employCount"
        label="录用"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.employCount || 0 }}
        </template>
      </el-table-column>
      <el-table-column
        label="录用率"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.employRate*100 }}%
        </template>
      </el-table-column>
      <el-table-column
        prop="entryCount"
        label="入职"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.entryCount || 0 }}
        </template>
      </el-table-column>
      <el-table-column
        label="到岗率"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.positionRate*100 }}%
        </template>
      </el-table-column>
      <el-table-column
        prop="lossCount"
        label="流失人数"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.lossCount || 0 }}
        </template>
      </el-table-column>
      <el-table-column
        label="流失率"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.lossRate*100 }}%
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="职位状态"
        align="center"
        width="120"
      >
        <template slot-scope="{row}">
          {{ row.state| filterState }}
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      next-text="下一页"
      layout="prev, pager, next, jumper"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      :auto-scroll="false"
      @pagination="getList"
    />
  </el-card>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import { jobAnalysisInfo, jobAnalysisInfoExcel } from '@/api/charts'
import { exportFile } from '@/utils/export'
import { parseTime } from '@/utils/index'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  directives: { waves },
  components: {
    Pagination
  },
  filters: {
    filterState(e) {
      switch (e) {
        case 0:
          return '正常'
          break
        case 1:
          return '已停止招聘'
          break
        case 0:
          return '职位已删除'
          break
        default:
          break
      }
    },
    parseTime(e) {
      return parseTime(e, '{y}-{m}-{d}')
    }
  },
  data() {
    return {
      listQuery: {
        startTime: '',
        endTime: '',
        jobName: '',
        pageNo: 1,
        pageSize: 10
      },
      time: '',
      list: null,
      total: 0,
      listLoading: true
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      jobAnalysisInfo(this.listQuery).then(response => {
        this.list = response.result.records
        this.total = response.result.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    exportExcel() {
      const ids = []; const selected = this.$refs.table.selection
      selected.forEach(item => {
        ids.push(item.jobId)
      })
      let parms = null
      if (ids.length) {
        parms = { jobId: ids.join(',') }
      } else {
        parms = this.listQuery
      }
      jobAnalysisInfoExcel(parms).then(response => {
        exportFile(response)
      })
    },
    change(e) {
      if (e) {
        this.listQuery.startTime = parseTime(e[0], '{y}-{m}-{d}')
        this.listQuery.endTime = parseTime(e[1], '{y}-{m}-{d}')
      } else {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      }
      this.listQuery.pageNo = 1
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .custom-header{
    line-height: 32px;
    .filter-item{
      display: inline-block;
      vertical-align: middle;
    }
  }
</style>
